
<template>
    <div>
        <div class="header">
        {{msg}} <div class="name">{{name}}</div>
         <button @click="getdata('xxx0')" data-idx="yanxianfe">3页面</button>
         
         <transition>
            <div class="footer">
                <router-link to="/">主页</router-link>
                <router-link to="/page2">关注</router-link>
                <router-link to="/page3">个人中心</router-link>
            </div>
         </transition>
    </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data(){
        return {
            msg:"我是",
            noActivated: false
        }
    },
    computed:{
        getname(){
            return this.$store.state.name
        },
        ...mapState(["name"])
    },
    methods: {
        
        getdata(){
            console.log(this.$route);
            this.$store.commit('UPDATA',"xx0")
        }

    },
}
</script>
<style lang="less" scoped>
    .header{
        background-color: #f5f5f5;
        width: 100%;
        height: 50px;
        line-height: 50px;
        .name{
            display: inline-block;
            color: red;
        }
    }.router-link-active{
        color: purple;
        text-decoration: none;
    }
    .footer{
        background-color: back;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-around;
    }

</style>